<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '事件上报',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <view class="pa-4">
    <wd-form custom-class="custom-form" ref="form" :model="model">
      <wd-cell-group>
        <wd-picker
          prop="river"
          v-model="model.river"
          align-right
          :columns="riverOptions"
          label="选择河道"
          value-key="id"
          label-key="title"
          @confirm="handleConfirm($event, 'river')"
          :rules="[{ required: true, message: '请选择河道' }]"
        />
        <view class="custom-drivider"></view>
        <wd-picker
          prop="site"
          v-model="model.site"
          align-right
          :columns="siteOptions"
          label="养护单位"
          value-key="id"
          label-key="title"
          @confirm="handleConfirm($event, 'site')"
          :rules="[{ required: true, message: '请选择养护单位' }]"
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <wd-textarea
          prop="address"
          v-model="model.address"
          label="添加点位"
          placeholder="请输入位置描述"
          auto-height
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <wd-picker
          prop="type"
          v-model="model.type"
          align-right
          :columns="typeOptions"
          label="事件类型"
          value-key="id"
          label-key="title"
          @confirm="handleConfirm($event, 'type')"
          :rules="[{ required: true, message: '请选择事件类型' }]"
        />
        <view class="custom-drivider"></view>
        <wd-textarea
          prop="description"
          v-model="model.description"
          label="事件描述"
          placeholder="请添加事件描述"
          auto-height
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <view class="pa-4">
          <view class="text-sm mb-3">上传附件</view>
          <wd-upload
            prop="fileList"
            :file-list="model.fileList"
            image-mode="aspectFill"
            label="照片上传"
            :action="action"
            @change="handleChange"
          ></wd-upload>
        </view>
      </wd-cell-group>

      <view class="fixed-bottom-btn flex gap-2">
        <wd-button
          custom-class="flex-1"
          type="primary"
          :round="false"
          size="large"
          @click="handleSubmit"
          block
        >
          提交
        </wd-button>
        <wd-button type="info" :round="false" size="large" @click="handleCancel" block>
          取消
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
const action: string =
  'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'
const form = ref()
const model = reactive<{
  river: number
  site: number
  address: string
  type: number
  description: string
  fileList: any[]
}>({
  river: null,
  site: null,
  address: '',
  type: null,
  description: '',
  fileList: [],
})
const riverOptions = ref([
  { id: 1, title: '选项1' },
  { id: 2, title: '选项2' },
])
const siteOptions = ref([
  { id: 1, title: '选项1' },
  { id: 2, title: '选项2' },
])
const typeOptions = ref([
  { id: 1, title: '选项1' },
  { id: 2, title: '选项2' },
])
function handleConfirm({ value }, type: string) {
  console.log('值---', value)
  console.log('字段名---', type)
}
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        // '校验通过'
        console.log('model---', model)
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const handleCancel = () => {}
</script>
<style lang="scss">
page {
  background: #f4f8fb;
  padding-bottom: 180rpx;
  /* #ifdef H5 */
  padding-bottom: 320rpx;
  min-height: 100%;
  /* #endif */
}
.custom-drivider {
  height: 1rpx;
  margin: 0 32rpx;
  background: #e5e5e5;
}
:deep(.custom-form) {
  .wd-cell-group {
    border-radius: 24rpx !important;
    overflow: hidden;
  }
  .wd-textarea {
    flex-direction: column !important;
    textarea {
      min-height: 100rpx;
      margin-top: 16rpx;
    }
  }
  .wd-cell__right {
    .wd-cell__error-message {
      text-align: right;
    }
  }
  .fixed-bottom-btn {
    position: fixed;
    background: #f4f8fb;
    box-shadow: none !important;
    bottom: 0;
    /* #ifdef H5 */
    bottom: 180rpx;
    /* #endif */
    left: 0;
    right: 0;
    padding: 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
}
</style>
